
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>addEventListener 事件演示</title>
    <style>
        body { 
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        .event-box {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 5px;
        }
        .demo-area {
            background-color: #f5f5f5;
            padding: 15px;
            margin: 10px 0;
        }
        button {
            padding: 8px 15px;
            margin: 5px;
            cursor: pointer;
        }
        #hoverArea {
            width: 200px;
            height: 100px;
            border: 2px dashed #666;
            text-align: center;
            line-height: 100px;
        }
        .feedback {
            color: green;
            margin-top: 5px;
        }
        .error { color: red; }
    </style>
</head>
<body>
    <h1>addEventListener 事件演示</h1>

    <!-- 事件演示容器 -->
    <div class="event-box">
        <h2>鼠标事件</h2>
        <div class="demo-area">
            <button id="clickButton">点击按钮</button>
            <div id="hoverArea">鼠标悬停区域</div>
            <p id="mouseFeedback" class="feedback"></p>
        </div>
    </div>

    <div class="event-box">
        <h2>键盘事件</h2>
        <div class="demo-area">
            <input type="text" id="keyInput" placeholder="输入文字试试">
            <p id="keyFeedback" class="feedback"></p>
        </div>
    </div>

    <div class="event-box">
        <h2>表单事件</h2>
        <div class="demo-area">
            <form id="myForm">
                <input type="text" id="username" placeholder="用户名">
                <p id="formFeedback" class="feedback"></p>
                <button type="submit">提交</button>
            </form>
        </div>
    </div>

    <script>
        // DOM 加载完成后执行
        document.addEventListener('DOMContentLoaded', () => {
            // ================= 鼠标事件 =================
            const clickButton = document.getElementById('clickButton');
            const hoverArea = document.getElementById('hoverArea');
            const mouseFeedback = document.getElementById('mouseFeedback');

            // 单击事件
            clickButton.addEventListener('click', (e) => {
                showFeedback(mouseFeedback, `单击事件触发 (${e.type})`);
            });

            // 双击事件
            clickButton.addEventListener('dblclick', (e) => {
                showFeedback(mouseFeedback, `双击事件触发 (${e.type})`);
            });

            // 鼠标悬停
            hoverArea.addEventListener('mouseenter', (e) => {
                e.target.style.backgroundColor = '#e3f2fd';
                showFeedback(mouseFeedback, `鼠标进入 (${e.type})`);
            });

            hoverArea.addEventListener('mouseleave', (e) => {
                e.target.style.backgroundColor = '#f5f5f5';
                showFeedback(mouseFeedback, `鼠标离开 (${e.type})`);
            });

            // ================= 键盘事件 =================
            const keyInput = document.getElementById('keyInput');
            const keyFeedback = document.getElementById('keyFeedback');

            keyInput.addEventListener('keydown', (e) => {
                showFeedback(keyFeedback, 
                    `按下按键：${e.key} (代码：${e.code})`);
            });

            keyInput.addEventListener('keyup', (e) => {
                showFeedback(keyFeedback, 
                    `释放按键：${e.key} (代码：${e.code})`);
            });

            // ================= 表单事件 =================
            const myForm = document.getElementById('myForm');
            const username = document.getElementById('username');
            const formFeedback = document.getElementById('formFeedback');

            // 表单提交
            myForm.addEventListener('submit', (e) => {
                e.preventDefault(); // 阻止默认提交行为
                if (username.value.trim() === '') {
                    showFeedback(formFeedback, '用户名不能为空', true);
                } else {
                    showFeedback(formFeedback, '表单验证通过！');
                    // 实际可以在这里发送表单数据
                }
            });

            // 输入事件
            username.addEventListener('input', (e) => {
                showFeedback(formFeedback, 
                    `输入中：${e.target.value}`);
            });

            // 聚焦/失焦事件
            username.addEventListener('focus', () => {
                username.style.outline = '2px solid blue';
            });

            username.addEventListener('blur', () => {
                username.style.outline = 'none';
            });
        });

        // 通用反馈显示函数
        function showFeedback(element, message, isError = false) {
            element.textContent = message;
            element.className = isError ? 'error' : 'feedback';
            setTimeout(() => {
                element.textContent = '';
                element.className = 'feedback';
            }, 2000);
        }
    </script>
</body>
</html>
